import React, { useEffect, useState } from "react";
import {
  GameDetailedInfo,
  getMatchDetail,
} from "../../../../API/getMatchDetail.ts";
import style from "./MatchDetail.module.scss";
import PlayerItem from "./PlayerItem/PlayerItem.tsx";
import Loading from "../../../../Components/Loading/Loaindg.tsx";
import { goldFormat } from "../../../../Util/util.tsx";
interface MatchDetailProps {
  gameId: string;
}
const MatchDetail: React.FC<MatchDetailProps> = (props: MatchDetailProps) => {
  const [matchDetail, setMatchDetail] = useState({} as GameDetailedInfo);
  useEffect(() => {
    getMatchDetail(props.gameId).then((res) => {
      setMatchDetail(res);
    });
  }, [props.gameId]);
  if (Object.keys(matchDetail).length !== 0) {
    return (
      <div className={style.MatchDetail}>
        {/*战绩详情头部*/}
        <div className={style.MatchHeader}>
          <div className={style.headerItem}>
            <p>时间</p>
            <p>{matchDetail.gameCreation}</p>
          </div>
          <div className={style.headerItem}>
            <p>模式</p>
            <p>{matchDetail.gameModel}</p>
          </div>
          <div className={style.headerItem}>
            <p>比赛时长</p>
            <p>{matchDetail.gameTime}</p>
          </div>
          <div className={style.headerItem}>
            <p>击杀</p>
            <p>
              {matchDetail.team1.kill}/{matchDetail.team2.kill}
            </p>
          </div>
        </div>
        {/*  战绩详情内容*/}
        <div>
          {/*队伍1*/}
          <div
            className={matchDetail.team1.win ? style.winTable : style.loseTable}
          >
            <div className={style.tableHeader}>
              <div className={style.headerInfo}>
                <span>{matchDetail.team1.win ? "胜利" : "失败"}</span>
                <span>
                  {matchDetail.team1.kill}/{matchDetail.team1.death}/
                  {matchDetail.team1.assists}
                </span>
                <span>{goldFormat(matchDetail.team1.goldEarned)}</span>
              </div>
              <div className={style.tableHeaderText}>
                <span>KDA</span>
                <span>补兵</span>
                <span>经济</span>
                <span>伤害</span>
              </div>
            </div>
            {
              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
              // @ts-ignore
              matchDetail.teams1List.map((item: never, index) => {
                return <PlayerItem key={index} playerInfo={item}></PlayerItem>;
              })
            }
          </div>
          {/*队伍2*/}
          <div
            className={matchDetail.team2.win ? style.winTable : style.loseTable}
          >
            <div className={style.tableHeader}>
              <div className={style.headerInfo}>
                <span>{matchDetail.team2.win ? "胜利" : "失败"}</span>
                <span>
                  {matchDetail.team2.kill}/{matchDetail.team2.death}/
                  {matchDetail.team2.assists}
                </span>
                <span>{goldFormat(matchDetail.team2.goldEarned)}</span>
              </div>
              <div className={style.tableHeaderText}>
                <span>KDA</span>
                <span>补兵</span>
                <span>经济</span>
                <span>伤害</span>
              </div>
            </div>
            {
              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
              // @ts-ignore
              matchDetail.teams2List.map((item: never, index) => {
                return <PlayerItem key={index} playerInfo={item}></PlayerItem>;
              })
            }
          </div>
        </div>
      </div>
    );
  } else {
    return <Loading />;
  }
};

export default MatchDetail;
